
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <script src="/tinymce/4.7.4/tinymce.min.js"></script>

    <script src="/tinymce/4.7.4/vue-easy-tinymce.js"></script>
    <!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.7.4/tinymce.min.js"></script>-->

    <!--    <script src="https://cdn.jsdelivr.net/npm/vue-easy-tinymce/dist/vue-easy-tinymce.min.js"></script>-->

    <link href="/element/css/index.css" rel="stylesheet"/>
    <script src="/element/js/vue.js"></script>
    <script src="/element/js/index.js"></script>
    <script src="/element/js/axios.js"></script>
    <script src="/element/js/app.js"></script>
    <title>Title</title>
    <style>
        .main{
            padding: 0px 20% 20px 20%;
        }
        .button-group{
            padding: 5px 10% 5px 60%;
        }
        .main-title{
            padding: 20px 20% 5px 20%;
        }
    </style>
</head>


<div class="button-group">
    <div class="layui-btn-group">
        <button type="button" class="el-button el-button--primary el-button--mini" onclick="save()">保存</button>
        <button type="button" class="el-button el-button--warning el-button--mini" onclick="update()" id="update">编辑</button>
        <button type="button" class="el-button el-button--warning el-button--mini" onclick="submitprocess()" id="submitprocess" style="display: none" >提交</button>
        <button type="button" class="el-button el-button--warning el-button--mini" onclick="cancelUpdate()" id="cancelUpdate" style="display: none" >取消编辑</button>
        <button type="button" class="el-button el-button--danger el-button--mini">删除</button>
    </div>
</div>
<hr>
<div class="main-title">
    <div class="el-form-item is-required el-form-item--medium titile">
        <label  class="el-form-item__label" style="width: 100px;">
            标题
        </label>
        <div class="el-form-item__content" style="margin-left: 100px;">
            <div class="el-input el-input--medium el-input--suffix" style="width: 100%;">
                <input type="text" autocomplete="off" placeholder="请输入流程标题" id="processTitle" class="el-input__inner">
            </div>
        </div>
    </div>
</div>
<input type="hidden" id="id" value="14">
<input type="hidden" id="processModelId" value="3">


<input type="hidden" id="bindid" value="">
<input type="hidden" id="processid" value="">


<input type="hidden" id="processdefid" value="75001">
<input type="hidden" id="tableName" value="kehu_demo">

<div class="main">
    <div id="app">
        <template>
            <div>
                <el-row :gutter="15">
                    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                        <el-col :span="23">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="姓名" prop="xm">
                                        <el-input v-model="formData.xm" placeholder="请输入姓名" :maxlength="11" show-word-limit
                                                  :disabled='disabled' clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="年龄" prop="nl">
                                        <el-input v-model="formData.nl" placeholder="请输入年龄" :maxlength="11" show-word-limit
                                                  :disabled='disabled' clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}">
                                        </el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-col>
                        <el-col :span="23">
                            <el-form-item label="手机号" prop="sjh">
                                <el-input v-model="formData.sjh" placeholder="请输入手机号" :maxlength="11" show-word-limit
                                          :disabled='disabled' clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="客户生日" prop="khsr">
                                <el-date-picker v-model="formData.khsr" format="yyyy-MM-dd" value-format="yyyy-MM-dd"
                                                :style="{width: '100%'}" placeholder="请输入客户生日" clearable :disabled='disabled'>
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="地址" prop="dz">
                                <el-input v-model="formData.dz" type="textarea" placeholder="请输入地址" :maxlength="11"
                                          show-word-limit :disabled='disabled' :autosize="{minRows: 4, maxRows: 4}"
                                          :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="微信号" prop="wxh">
                                <el-input v-model="formData.wxh" placeholder="请输入微信号" :maxlength="11" show-word-limit
                                          :disabled='disabled' clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="审批意见" prop="spyj">
                                <el-input v-model="formData.spyj" type="textarea" placeholder="请输入审批意见" :maxlength="11"
                                          show-word-limit :disabled='disabled' :autosize="{minRows: 4, maxRows: 4}"
                                          :style="{width: '100%'}"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
            </div>
        </template>
    </div>
</div>
<script>
    var Main = {
        components: {},
        props: [],
        data() {
            return {
                disabled: true,
                formData: {
                    xm: "",
                    nl: "",
                    sjh: "",
                    khsr: "",
                    dz: "",
                    wxh: "",
                    spyj: "",
                },
                rules: {
                    xm: [{
                        required: true,
                        message: '请输入姓名',
                        trigger: 'blur'
                    }],
                    nl: [{
                        required: true,
                        message: '请输入年龄',
                        trigger: 'blur'
                    }],
                    sjh: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }],
                    khsr: [{
                        required: true,
                        message: '请输入客户生日',
                        trigger: 'change'
                    }],
                    dz: [{
                        required: true,
                        message: '请输入地址',
                        trigger: 'blur'
                    }],
                    wxh: [{
                        required: true,
                        message: '请输入微信号',
                        trigger: 'blur'
                    }],
                    spyj: [{
                        required: true,
                        message: '请输入审批意见',
                        trigger: 'blur'
                    }],
                },
            }
        },
        computed: {},
        watch: {},
        created() {
            this.initData();
        },
        mounted() {
            window.save = this.save;
            window.update = this.update;
            window.cancelUpdate = this.cancelUpdate;
            window.submitprocess=this.submitprocess;
        },
        methods: {
            //提交流程
            submitprocess(){
                let obj=this.getBaseData();
                api.POST('/flow/createProcess', obj, (res) => {
                    // if (res.code === 0) {
                    //     let dataid = res.data.id;
                    //     if (dataid !== undefined && dataid !== '') {
                    //         let processModelId = document.getElementById("processModelId").value;
                    //         window.location.href = "/flowprocess/index?processId=" + processModelId + "&id=" + dataid;
                    //     }
                    // }
                    this.$message(res.msg);
                });
            },
            cancelUpdate() {
                var processTitle = document.getElementById("processTitle");
                processTitle.setAttribute("disabled", "disabled");
                var cancelUpdate = document.getElementById("cancelUpdate");
                var update = document.getElementById("update");
                cancelUpdate.style.display = "none";
                update.style.display = "";
                this.disabled = true;
            },
            //编辑
            update() {
                var processTitle = document.getElementById("processTitle");
                processTitle.removeAttribute("disabled");
                var cancelUpdate = document.getElementById("cancelUpdate");
                var update = document.getElementById("update");
                update.style.display = "none";
                cancelUpdate.style.display = "";
                this.disabled = false;
            },
            save() {
               let obj=this.getBaseData();
                api.POST('/tablemodel/saveData', obj, (res) => {
                    if (res.code === 0) {
                        let dataid = res.data.id;
                        if (dataid !== undefined && dataid !== '') {
                            let processModelId = document.getElementById("processModelId").value;
                            window.location.href = "/flowprocess/index?processId=" + processModelId + "&id=" + dataid;
                        }
                    }
                    this.$message(res.msg);
                });
            },
            getBaseData(){
                let obj = {}
                obj.tableName = document.getElementById("tableName").value;
                obj.data = this.formData;
                obj.id = document.getElementById("id").value
                obj.bindid = document.getElementById("bindid").value
                obj.processid = document.getElementById("processid").value
                obj.processdefid = document.getElementById("processdefid").value
                obj.processTitle = document.getElementById("processTitle").value
                obj.processModelId = document.getElementById("processModelId").value;
                return obj;
            },
            initData() {
                var processTitle = document.getElementById("processTitle");
                processTitle.setAttribute("disabled", "disabled");
                let id = document.getElementById("id").value
                let processModelId = document.getElementById("processModelId").value
                if (id !== undefined && id !== '') {
                    //让按钮可以点击
                    var submitprocess=document.getElementById("submitprocess");
                    submitprocess.style.display = "";

                    api.POST('/tablemodel/getData', {
                        dataId: id,
                        processModelId: processModelId
                    }, (res) => {
                        if (res.code === 0) {
                            this.formData = res.data;
                            let processTitle = res.data.processTitle;
                            document.getElementById("processTitle").value = processTitle;
                        }
                    })
                }
            }
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>
<style>
</style>

</body>
</html>